<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
  <meta http-equiv="Pragma" content="no-cache" />
  <meta http-equiv="Expires" content="0" />
  <title>logo</title>
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>
  <div class="more">
    <div class="public-top">
      <img src="./images/logo.png" class="logo" alt="">
      <a href="javascript:void(0)" class="login-out">退出登录</a>
    </div>
    <div class="public-bg">
      <div class="container">
        <a href="index.html">
          <img src="./images/index-p.png" alt="">
        </a>
        <a href="zdgl.html">
          <img src="./images/zd.png" alt="">
        </a>
        <a href="more.html" class="index-pic">
          <img src="./images/more-a.png" alt="">
        </a>
      </div>
    </div>
    <div class="cont">
      <div class="container">
        <div class="left">
          <div class="item item1 active">
            <p>设备信息</p>
          </div>
          <div class="item item2">
            <p>设备信息</p>
            <img src="./images/xia.png" alt="">
          </div>
          <div class="item item3">
            <p>设备信息</p>
            <img src="./images/xia.png" alt="">
          </div>
        </div>
        <div class="right right1">
          <p class="tit">路由器信息</p>
          <p class="look">您可以查看关于路由器的相关设备信息。</p>
          <div class="right-item">
            <p class="title">路由器信息</p>
            <p class="line"></p>
            <p class="text">产品名称<span>华为路由WS5100</span></p>
            <p class="text">产品名称<span>华为路由WS5100华为路由WS5100</span></p>
            <p class="text">产品名称<span>华为路由WS5100</span></p>
            <p class="text">产品名称<span>华为路由WS5100产品名称</span></p>
            <p class="text">产品名称<span>华为路由WS5100</span></p>
          </div>
          <div class="right-item">
            <p class="title">路由器信息</p>
            <p class="line"></p>
            <p class="text">产品名称<span>华为路由WS5100</span></p>
            <p class="text">产品名称<span>华为路由WS5100华为路由WS5100</span></p>
            <p class="text">产品名称<span>华为路由WS5100</span></p>
            <p class="text">产品名称<span>华为路由WS5100产品名称</span></p>
            <p class="text">产品名称<span>华为路由WS5100</span></p>
          </div>
          <div class="right-item">
            <p class="title">路由器信息</p>
            <p class="line"></p>
            <p class="text">产品名称<span>华为路由WS5100</span></p>
            <p class="text">产品名称<span>华为路由WS5100华为路由WS5100</span></p>
            <p class="text">产品名称<span>华为路由WS5100</span></p>
            <p class="text">产品名称<span>华为路由WS5100产品名称</span></p>
            <p class="text">产品名称<span>华为路由WS5100</span></p>
          </div>
        </div>
        <div class="right right2">
          <p class="tit">局域网</p>
          <p class="title">局域网IP地址修改后...局域网IP地址修改后...局域网IP地址修改后...</p>
          <p class="line"></p>
          <div class="ip-box">
            <div class="item">
              <p class="text">路由器局域网IP地址</p>
              <input type="text" class="input">
            </div>
            <div class="item item1">
              <p class="text">DHCP服务器</p>
              <label class="switch"> <input type="checkbox"> <span></span> </label>
            </div>
          </div>
          <div class="save">保存</div>
        </div>
        <div class="right right3">
          <p class="tit">修改登录密码</p>
          <p class="title">访问路由器Web配置界面需要输入正确的密码。访问路由器Web配置界面需要输入正确的密码。</p>
          <img src="./images/help.png" class="help" alt="">
          <p class="line"></p>
          <div class="form">
            <div class="item">
              <p class="text">当前密码</p>
              <input type="text" class="input">
            </div>
            <div class="item">
              <p class="text">新密码</p>
              <input type="text" class="input">
            </div>
            <div class="item">
              <p class="text">确认新密码</p>
              <input type="text" class="input">
            </div>
          </div>
          <div class="save">保存</div>
        </div>
      </div>
    </div>
    <div class="public-bottom">
      <div class="container">
        <div class="close">
          <img src="./images/close.png" alt="">
          <p class="text">重启路由器</p>
        </div>
        <div class="text-box">
          <div class="item">
            <p class="top">应用下载</p>
            <a href="#" class="text">华为智能家居APP</a>
          </div>
          <div class="item">
            <p class="top">关于产品</p>
            <a href="#" class="text">华为商城</a>
            <a href="#" class="text">花粉论坛</a>
          </div>
          <div class="item">
            <p class="top">联系方式</p>
            <a href="#" class="text">官方微信</a>
          </div>
          <div class="item">
            <p class="top">法律申明</p>
            <a href="#" class="text">隐私声明</a>
            <a href="#" class="text">花粉论坛</a>
            <a href="#" class="text">开源软件声明</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
<script src="./js/jquery-1.10.2.min.js"></script>
<script>
  $('.cont .left .item1').click(function () {
    $('.cont .left .item').removeClass('active')
    $('.cont .right').hide()
    $('.cont .right1').show()
    $('.cont .container').css('height', '1301px')
    $(this).addClass('active')
  })
  $('.cont .left .item2').click(function () {
    $('.cont .left .item').removeClass('active')
    $('.cont .right').hide()
    $('.cont .right2').show()
    $('.cont .container').css('height', '774px')
    $(this).addClass('active')
  })
  $('.cont .left .item3').click(function () {
    $('.cont .left .item').removeClass('active')
    $('.cont .container').css('height', '774px')
    $('.cont .right').hide()
    $('.cont .right3').show()
    $(this).addClass('active')
  })
</script>

</html>